<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>我的图片</title>
    <link rel="stylesheet" type="text/css" href="css/public.css"/>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
    <link href="css/common.css" rel="stylesheet" />
    <script src="js/common.js"></script>
  </head>
  <body class="me_images">
    <header class="top">
      <nav>
        <div class="left left_close"></div>
          <div class="logo"></div>
          <a href="#"><div class="right right_close"></div></a>
      </nav>
      <ul class="open_list">
          <li><a href="index.html" class="first_a">首页</a></li>
          <li class="open_list_class">
            <a href="javascript:;" class="first first_a">服务项目<em class="jt"></em></a>
            <ul class="section">
              <li><a href="family_education.html">家庭教育</a></li>
              <li><a href="train.html">校园培训</a></li>
              <li><a href="service_xwkc.html">校外课程</a></li>
              <li><a href="tech.html">技术支持</a></li>
            </ul>
          </li>
          <li><a href="cooperation.html" class="first_a">诚邀合作</a></li>  
          <li><a href="about_us.html" class="first_a">关于我们</a></li>
      </ul>
      <ul class="me_list">
          <li><a href="me_editor.html" class="first_a">修改信息</a></li>
          <li><a href="me_images.html" class="a_active first_a">我的图片</a></li>
          <li><a href="login.html" class="first_a">退出登录</a></li>
      </ul>
    </header>
    <article>
      <section class="top_img"><img src="./images/editor_bg.png"/></section>
      <img src="./images/user_img.png" class="user_img"/>
      <h1>用户名</h1>
      <div class="images_list" value="0">
        <h2><span class="time">2017-06-01</span><em>低龄家长PD21班</em></h2>
        <ul class="clear">
          <li><img src="./images/me_images_test.png" alt="" /></li>
          <li><img src="./images/me_images_test.png" alt="" /></li>
          <li><img src="./images/me_images_test.png" alt="" /></li>
          <li><img src="./images/me_images_test.png" alt="" /></li>
          <li><img src="./images/me_images_test.png" alt="" /></li>
          <li><img src="./images/me_images_test.png" alt="" /></li>
          <li><img src="./images/me_images_test.png" alt="" /></li>
          <li><img src="./images/me_images_test.png" alt="" /></li>
        </ul>
      </div>
      <div class="images_list" value="1">
        <h2><span class="time">2017-06-01</span><em>低龄家长PD21班</em></h2>
        <ul class="clear">
          <li><img src="./images/me_images_test.png" alt="" /></li>
          <li><img src="./images/me_images_test.png" alt="" /></li>
          <li><img src="./images/me_images_test.png" alt="" /></li>
        </ul>
      </div>
      <div class="images_list" value="2">
        <h2><span class="time">2017-06-01</span><em>低龄家长PD21班</em></h2>
        <ul class="clear">
          <li><img src="./images/me_images_test.png" alt="" /></li>
          <li><img src="./images/me_images_test.png" alt="" /></li>
          <li><img src="./images/me_images_test.png" alt="" /></li>
          <li><img src="./images/me_images_test.png" alt="" /></li>
          <li><img src="./images/me_images_test.png" alt="" /></li>
        </ul>
      </div>
    </article>
    <div class="big_image" style="display: none;">
      <div class="swiper-container swiper-container-big">
          <div class="swiper-wrapper">
              <div class="swiper-slide"><img src="./images/me_images_test.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/app_img2.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/me_images_test.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/app_img2.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/me_images_test.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/app_img2.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/me_images_test.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/app_img2.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/me_images_test.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/app_img2.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/me_images_test.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/app_img2.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/me_images_test.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/app_img2.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/me_images_test.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/app_img2.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/me_images_test.png" alt="" /></div>
              <div class="swiper-slide"><img src="./images/app_img2.png" alt="" /></div>
          </div>
       </div> 
       <p class="bigimages_top"><em></em></p>
       <p class="bigimages_bottom"><em></em>下载</p>
       <div class="dw_alert">请长按屏幕保存图片</div>
    </div>
    <footer class="bottom">
      <h1>北京乐知鱼教育科技有限公司 —— 专业的教育支持平台</h1>
      <p>地址：北京市朝阳区东四环中路195号华腾新天地大厦509室</p>
      <p>乐知鱼版权所有，京ICP备16063606号</p>
    </footer>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/public.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      //点击图片放大
      $(function(){
        //取消默认事件
        var event_f = function(e){e.preventDefault();} 
        //点击图片放大
        $('.images_list li').click(function(){
          var first_index=$(this).parent().parent().attr('value');
          var sec_index=$(this).index();
          var l=0;
          for(var i=0;i<first_index;i++){
            l+=$('.images_list').eq(i).find('li').length;
          }
          var index=l+$(this).index();
          $('.big_image').fadeIn();
          document.body.addEventListener('touchmove', event_f, false); //禁止页面滚动
          wait();
          var swiper = new Swiper('.swiper-container-big', {
              initialSlide:index
            });
        });
        //点击关闭
        $('.bigimages_top em').click(function(){
          $('.big_image').fadeOut();
          $('.bigimages_top').toggle();
          $('.bigimages_bottom').toggle();
          document.body.removeEventListener('touchmove', event_f, false);
        });
        //点击显示关闭按钮
        $('.big_image .swiper-slide').click(function(){
          $('.bigimages_top').toggle();
          $('.bigimages_bottom').toggle();
        });
        //下载
        $('.bigimages_bottom').click(function(){
          $('.dw_alert').show();
          setTimeout(function alertnone(){$('.dw_alert').hide();},1000);
        });
      });
    </script>
    <script type="text/javascript"> 
      //图片切换
      window.onload = function(){ 
        wait();
      };     
     function wait(){
        $(".big_image .swiper-slide").each(function(){
          var h=($(window).height()-$(this).find('img').height())/2;
          $(this).find('img').css("margin-top",h+"px");
        });
      }  
    </script>
  </body>
</html>
